.toast {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    flex-direction: column; }
    .toast_bg {
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0; }
    .toast_box {
     position: relative;
     left: 50%;
     top: 50%;
     width: 2.8rem;
     height: 2rem;
     margin: -1rem -1.4rem;
     background: rgba(0, 0, 0, 0.65);
     border-radius: .1rem;
     color: #fff; }
    .toast_text {
     position: absolute;
     bottom: 16%;
     text-align: center;
     width: 90%;
     margin: 0 5%;
     height: .28rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap; }
    .toast_icon {
     position: relative;
     left: 50%;
     top: 15%;
     margin: -.4rem;
     width: .8rem;
     height: .8rem; }
    .toast_loading {
     -webkit-animation: loading 1s steps(12, end) infinite;
     animation: loading 1s steps(12, end) infinite;
     background: url("") no-repeat;
     background-size: 100%; }
    .toast_success {
     background: url("") no-repeat;
     background-size: 100%; }
    .toast_error {
     background: url("") no-repeat;
     background-size: 100%; }
    .toast_info {
     background: url("") no-repeat;
     background-size: 100%; }
   
   @-webkit-keyframes loading {
    0% {
     -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg); }
    100% {
     -webkit-transform: rotate3d(0, 0, 1, 360deg);
     transform: rotate3d(0, 0, 1, 360deg); } }
   
   @keyframes loading {
    0% {
     -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg); }
    100% {
     -webkit-transform: rotate3d(0, 0, 1, 360deg);
     transform: rotate3d(0, 0, 1, 360deg); } }